<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8" />
<title>SC Accordion - Sharp-Coders.com</title>
<link rel="stylesheet" type="text/css" href="css/sc-accordion.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/sc-accordion.min.js"></script>
<script>
	$(function(){
		$('ul#scadminmenu').scaccordion({
			toggleMenu: true
		});
	});
</script>
<style type="text/css">
#demo{
	width: 220px;
	background: #ccc;
}
li > a{
	font: bold 14px sans-serif, arial, verdana;
}
</style>
</head>

<body>
<div id="demo">
	<ul id="scadminmenu">
		<li>
			<div class="menu_dashboard_icon menu_icon"></div>
			<a href="#>
				Dashboard
			</a>
		</li>
		<li>
			 <div class="menu_icon menu_category_icon"></div>
			<a href="javascript:void(0)" class="menu">Manage Category</a>
			<ul class="scadminsubmenu closed">
				<li><a href="#">Main Category</a></li>
				<li><a href="#">Sub Categories</a></li>
			</ul>
		</li>
		<li>
			<div class="menu_icon menu_offers_icon"></div>
			<a href="javascript:void(0)" class="menu">Customer Service</a>
			<ul class="scadminsubmenu closed">
				<li><a href="#">Manage Ads</a></li>
				<li><a href="#">Manage Feedbacks</a></li>
			</ul>
		</li>
		<li>
			<div class="menu_icon menu_notification_icon"></div>
			<a href="javascript:void(0)" class="menu">Notifications</a>
			<ul class="scadminsubmenu closed">
				<li><a href="#">Add Newsletter</a></li>
				<li><a href="#">All Newsletters</a></li>
			</ul>
		</li>
		<li>
			<div class="menu_icon menu_customer_icon"></div>
			<a href="javascript:void(0)" class="menu">Manage Users</a>
			<ul class="scadminsubmenu closed">
				<li><a href="#">Search User</a></li>
				<li><a href="#">User Ads History</a></li>
				<li><a href="#">Manage Subscribers</a></li>
			</ul>
		</li>
		<li>
			<div class="menu_icon menu_history_icon"></div>
			<a href="javascript:void(0)" class="menu">History</a>
			<ul class="scadminsubmenu closed">
				<li><a href="#">Website State</a></li>
			</ul>
		</li>
		<li>
			<div class="menu_icon menu_pages_icon"></div>
			<a href="javascript:void(0)" class="menu">Manage Pages</a>
			<ul class="scadminsubmenu closed">
				<li><a href="#">All Pages</a></li>
				<li><a href="#">Add Page</a></li>
			</ul>
		</li>
		<li>
			<div class="menu_icon menu_settings_icon"></div>
			<a href="javascript:void(0)" class="menu">Settings</a>
			<ul class="scadminsubmenu closed">
				<li><a href="#">General Setting</a></li>
				<li><a href="#">Configurations</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>